<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>watch</h1>
    <hr>
    <div id="app">
        <p>今日的温度:{{wendu}}</p>
        <p>穿衣建议:{{chuanyi}}</p>
        <p><button @click="shenggao">升高温度</button><button @click="jiangdi">减低温度</button></p>
    </div>
    <script type="text/javascript">
       var chanyiarry= ['T恤短袖','夹克长裙','棉衣羽绒服'];
       var app = new Vue({
        el:'#app',
        data:{
            wendu: 14,
            chuanyi:'夹克长裙'
        },
        methods:{
            shenggao:function(){
                this.wendu+=5;

            },
            jiangdi:function(){
                this.wendu -=5;
            }
        },
        // watch:{
        //     wendu:function(newVal,oldVal){
        //        if(newVal>=26){
        //             this.chuanyi=chanyiarry[0];
        //        }else if(newVal<26 && newVal>0){
        //             this.chuanyi=chanyiarry[1];
        //        }else{
        //             this.chuanyi=chanyiarry[2];
        //        }
        //     }
        // }
       })

       app.$watch('wendu',function(newVal,oldVal){
        if(newVal>=26){
                    this.chuanyi=chanyiarry[0];
               }else if(newVal<26 && newVal>0){
                    this.chuanyi=chanyiarry[1];
               }else{
                    this.chuanyi=chanyiarry[2];
               }
       })
    </script>
</body>
</html>